<template>
  <div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/home/statistics' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>首页统计</el-breadcrumb-item>
       <el-breadcrumb-item>首页统计</el-breadcrumb-item>
     </el-breadcrumb>
     <el-main>
       <el-row>
         <el-col :sm="12" :lg="8">
           <el-result  title="用户统计">
             <template slot="icon">
               <i   class="icon1 el-icon-user-solid"></i>
             </template>
             <template slot="extra">
               <el-tag size="medium" type="success">{{ countData.users_count }}</el-tag>
             </template>
           </el-result>
         </el-col>
         <el-col :sm="12" :lg="8">
           <el-result  title="商品统计">
             <template slot="icon">
               <i class="icon2 el-icon-goods"></i>
             </template>
             <template slot="extra">
               <el-tag size="medium" type="warning">{{ countData.goods_count }}</el-tag>
             </template>
           </el-result>
         </el-col>
         <el-col :sm="12" :lg="8">
           <el-result  title="订单统计" >
             <template slot="icon">
               <i class="icon3 el-icon-s-order"></i>
             </template>
             <template slot="extra">
               <el-tag size="medium">{{ countData.order_count }}</el-tag>
             </template>
           </el-result>
         </el-col>
       </el-row>
     </el-main>
    </div>
</template>

<script>
import {getCount} from "../../api/count";
export default {
  name: "Statistics",
  data(){
    return{
      countData:{}
    }
  },
  mounted() {
    this.getStatisticsData()
  },
  methods:{
    async getStatisticsData(){
      const res = await getCount()
      if(res && res.status === 200){
        this.countData = res.data
      }else {
        this.$message.error('网络错误，请稍后再试')
      }
      // console.log(res.data);
    }
  }
}
</script>

<style scoped lang="css">
 .el-breadcrumb{
   /*margin-left: 20px;*/
   padding:20px 0 0 20px;
 }
 .icon1,.icon2,.icon3{
   font-size: 100px;
   color: #0091e6;
 }
 .icon1{
   color: #67c23a;
 }
 .icon2{
   color: #e6a23c;
 }
</style>